<template>
	<view class="">
		<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="close" @close="close"></u-picker>
	<u-button @click="show = true" type="small">打开</u-button>
	{{picker.guid}}
	{{picker.label}}
	
	<!-- <uni-datetime-picker  :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="close" @close="close"></uni-datetime-picker> -->
	<!-- <uni-datetime-picker
					type="datetimerange"
					v-model="datetimerange" 
					return-type="date"
					:border="false"
					@change="change"
				/>
		{{datetimerange}} -->
	<uni-calendar  :insert="false" 
    :lunar="true" 
	ref="calendar"
    :start-date="'2000-03-20 20:10'"
    :end-date="'2100-05-10 10:10'"
	:range="datetimerange"
    @confirm="changeUniappCalender"></uni-calendar> 
	<button @click="openUniappCalender"> 打开uni日历</button>
	</view>
   
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				picker:{
					label:"",
					guid:""
				},
                columns: [
                    [{
                        label: '雪月夜',
                        // 其他属性值
                        guid: 2021
                        // ...
                    }, {
                        label: '冷夜雨',
                        guid: 804
                    }]
                ],
				 datetimerange: ["2000-03-20 20:10", "2100-05-10 10:10"],
			}
		},
		methods:{
			changeUniappCalender(val){
				
				this.datetimerange=val;
				this.$refs.calendar.close();
			},
			openUniappCalender(){
				this.$refs.calendar.open();
			},
			change(val){
				this.datetimerange=val;
			},
			close(){
				this.show=false;
			},
			confirm(val){
				console.log(val);
				this.picker = val.value[0];
				this.show=false;
			}
		}
	}
</script>